<template>
  <div>
    <Nav />

    <div class="showContent">
      <div class="tab"><span style="color: rgb(143, 189, 1)">主页</span>/</div>
      <div class="content">
        <div>
          <img :src="user.avatar_url" style="border-radius:3px" /><span>{{
            $route.params.loginname
          }}</span>
        </div>
        <h6>{{ user.score }}积分</h6>
        <h6 @click="goCollect($route.params.loginname)">{{collectCount}}个话题收藏</h6>
        <ul>
          <li>主页: &nbsp;&nbsp;http://{{ user.loginname }}.com</li>
          <li>地址: &nbsp;&nbsp;暂定</li>
          <li>用户: &nbsp;&nbsp;@{{ user.loginname }}</li>
          <li>联系: &nbsp;&nbsp;{{ user.loginname }}微博</li>
        </ul>
        <h6>
          <span>注册时间是{{ createData(user.create_at) }}年前</span>
        </h6>
      </div>
    </div>
    <div class="showContent">
      <div class="tab">最近创建的话题</div>
      <div
        class="contentbody"
        v-for="(recent_topic, index) in recent_topics"
        :key="index"
        v-if="index<5"
      >
        <div class="bodytext container-fluid">
          <div class="imgdiv">
            <img class="uimg" :src="user.avatar_url" />
          </div>
          <div class="bodyshow row">
            <div class="showleft col-lg-1">
              <span>
                <i style="color: rgb(158, 120, 196)">11</i>/
                <i style="color: rgb(180, 186, 203)"> 111 </i>
              </span>
            </div>
            <div class="showcenter col-lg-8">
              <a class="h6">{{ recent_topic.title }}</a>
            </div>
            <div class="showright col-lg-1">
              <span class="dayspan"
                >{{ topicsDate(recent_topic.last_reply_at) }}年前</span
              >
            </div>
          </div>
        </div>
      </div>
      <span style="margin:5px 0 5px 15px;color:rgb(127,102,102)">查看更多>></span>
    </div>

    <div class="showContent">
      <div class="tab">最近参与的话题</div>
      <div
        class="contentbody"
        v-for="(recent_replie, index) in recent_replies"
        :key="index"
        v-if="index<5"
      >
        <div class="bodytext container-fluid">
          <div class="imgdiv">
            <img class="uimg" :src="recent_replie.author.avatar_url" />
          </div>
          <div class="bodyshow row">
            <div class="showleft col-lg-1">
              <span>
                <i style="color: rgb(158, 120, 196)">11</i>/
                <i style="color: rgb(180, 186, 203)"> 111 </i>
              </span>
            </div>
            <div class="showcenter col-lg-8">
              <a class="h6">{{ recent_replie.title }}</a>
            </div>
            <div class="showright col-lg-1">
              <span class="dayspan"
                >{{ repliesData(recent_replie.last_reply_at) }}天前</span
              >
            </div>
          </div>
        </div>
      </div>
      <span style="margin:5px 0 5px 15px;color:rgb(127,102,102)">查看更多>></span>
    </div>
    <Footer />
  </div>
</template>

<script>
export default {
  name: "UserDetail",
  data() {
    return {
      user: "",
      collectCount:0
    };
  },
  mounted() {
    let loginname = this.$route.params.loginname;
    this.$API.reqGetUserDetail(loginname).then((res) => (this.user = res.data));
    this.$API.reqGetUserCollect(loginname).then(res=>this.collectCount = res.data.length);
  },
  computed: {
    //注册时间
    createData() {
      return (create_at) => {
        //将时间字符串转换成毫秒
        let oldDate = Date.parse(create_at);
        let newDate = new Date().getTime();
        return Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30 / 12);
      };
    },
    //最近创建的话题
    recent_topics() {
      return this.user.recent_topics || [];
    },
    //最近创建话题的时间
    topicsDate() {
      return (last_reply_at) => {
        //将时间字符串转换成毫秒
        let oldDate = Date.parse(last_reply_at);
        let newDate = new Date().getTime();
        let hour = Math.floor((newDate - oldDate) / 1000 / 60 / 60 );
        let day = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24);
        let mouth = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30);
        let year = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30 / 12);
        return hour <=24 ? hour+'小时' : day<=30 ? day+'天' : mouth<=12? mouth+'个月' : year+'年';
      };
    },
    //最近参与的话题
    recent_replies(){
        return this.user.recent_replies || [];
    },
    //最近参与的话题的时间
    repliesData(){
         return (last_reply_at) => {
        //将时间字符串转换成毫秒
        let oldDate = Date.parse(last_reply_at);
        let newDate = new Date().getTime();
        return Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24);
      };
    }
  },
  methods: {
    goCollect(loginname){
      this.$router.push({
        name:'UserCollect',
        params:{
          loginname,
        }
      })
    }
  },
};
</script>

<style scoped>
.showContent {
  width: 80%;
  margin: 20px auto;
  background: rgb(255, 255, 255);
}
.showContent .tab {
  padding: 10px;
  background: rgb(246, 246, 246);
}
.showContent .content {
  position: relative;
  padding: 10px;
  background: rgb(255, 255, 255);
}
.showContent .content img {
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border-radius: 5px;
}
.showContent .content span {
  color: rgb(163, 128, 135);
  font-size: 13px;
  font-weight: bold;
}
.showContent .content h6 {
  margin: 10px;
  font-size: 14px;
}
.showContent .content h6:nth-child(3) {
  margin: 10px;
  font-size: 14px;
  color: rgb(102, 102, 102);
}
.showContent .content h6 span {
  color: rgb(171, 171, 179);
  font-size: 14px;
  font-weight: 400;
}
.showContent .content ul li {
  color: rgb(102, 102, 102);
  font-size: 13px;
  font-weight: bold;
  margin-top: 8px;
}
.contentbody {
    height: 55px;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(240, 239, 237);
}
.bodytext {
  height: 40px;
  position: relative;
}
.contentbody:hover {
  background: rgb(240, 239, 237);
}
.imgdiv {
  display: inline-block;
  margin-left: 10px;
}
.uimg {
  margin-top: 8px;
  width: 35px;
  height: 35px;
  border-radius:3px;
}
.bodyshow {
  width: 98%;
  display: inline-block;
  position: absolute;
  padding: 10px;
}
.bodyshow span {
  font-size: 11px;
}
.bodyshow .h6 {
  text-decoration: none;
  color: rgb(0, 136, 204);
  display: inline-block;
  font-size: 16px;
  margin-left: 10px;
}
.showleft {
  margin-left: 4px;
  /* width:6%; */
  display: inline-block;
}
.showleft span {
  font-size: 6px;
}
.showcenter {
  margin: 4px 15px 2px 15px;
  /* width: 70%; */
  display: inline-block;
}
.showright {
  /* width: 5%; */
  display: inline-block;
}
.dayspan {
  color: rgb(123, 128, 135);
}
i {
  font-style: normal;
}
</style>